<template>
	<view class="container">

		<view class="top">
			<image class="prev-icon" src="../../static/images/room/prev.png" mode="aspectFit" @click="prev"></image>
			<view class="myroom">新增模式</view>
			<view class="plus-icon-container">
				<image class="plus-icon" src="../../static/images/room/more.png" mode="aspectFit"></image>
			</view>
		</view>
		<!-- 列表 -->
		<view class="container-list">
			<view class="list-item" v-for="(item, index) in listData" :key="index" @click="handleClick(item)">
				<image :src="item.leftImage" class="left-image"></image>
				<view class="text_tips">
					<text class="text">{{ item.text }}</text>
					<text class="tips">{{ item.tips }}</text>
				</view>

				<image src="../../static/images/mode/right.png" class="right-image"></image>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				mode: null,
				listData: [{
						leftImage: '../../static/images/mode/click.png',
						text: '点击即用',
						tips: '示例：一键打开客厅的所有灯',
					},
					{
						leftImage: '../../static/images/mode/sun.png',
						text: '当天气变化时',
						tips: '示例：当周围温度超过25°C',
					},
					{
						leftImage: '../../static/images/mode/position.png',
						text: '当位置改变时',
						tips: '示例：当您回家或离开家时',
					},
					{
						leftImage: '../../static/images/mode/clock.png',
						text: '指定时间',
						tips: '示例：上午08:00时、早上时。',
						target: '/pages/mode/addmode_time'
					},
					{
						leftImage: '../../static/images/mode/bag.png',
						text: '当设备状态发生变化时',
						tips: '示例：当检测到异常活动时。',
					},
					{
						leftImage: '../../static/images/mode/safe.png',
						text: '安全模式',
						tips: '示例：通过网关撤防、停留或撤防。',
					}, {
						leftImage: '../../static/images/mode/police.png',
						text: '当警报触发时',
						tips: '示例：触发火灾警报或紧急警报时。',
					},
				]
			};
		},
		methods: {
			prev() {
				uni.navigateTo({
					url: "/pages/mode/mode"
				})
			},
			handleClick(item) {
				console.log(item);
				if (item.target) {
					uni.navigateTo({
						url: item.target
					});
				}
			}
		},
		onshow() {

		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}

	.top {
		display: flex;
		align-items: center;
		height: 52px;
		background-color: white;
		padding: 4px;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
		border-bottom: 1.5px solid #f0f0f0;
	}

	.prev-icon {
		flex: 1;
		width: 100%;
		height: 100%;
		object-fit: contain;

		padding: 3px;
	}

	.myroom {
		flex: 7;
		font-size: 18px;
		color: #0a0d14;
		font-weight: bold;
		text-align: center;
	}

	.plus-icon-container {
		position: relative;
	}

	.plus-icon {
		width: 30px;
		height: 40px;
		object-fit: contain;
		margin-right: 10px;
	}

	.container-list {
		display: flex;
		flex-direction: column;
		padding: 40rpx;
		margin-top: 95rpx;
	}

	.list-item {
		border-radius: 25rpx;
		background-color: white;

		// padding-top:180rpx ;
		// padding-left:5vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		// margin-bottom: 40rpx;
		border-bottom: 1px solid #ececec;
		padding: 40rpx;
	}

	.left-image {
		width: 70rpx;
		height: 70rpx;
	}

	.right-image {
		width: 40rpx;
		height: 40rpx;
	}

	.text_tips {
		display: flex;
		flex-direction: column;
		flex: 1;
		margin: 0 43rpx;
	}

	.text {
		margin-top: 4rpx;
		font-size: 37rpx;
		font-weight: bold;
	}

	.tips {
		margin-top: 14rpx;
		font-size: 24rpx;
		color: #7e7e7e;
	}
</style>